<script setup lang="ts">
import useBookmarks from '../../use-bookmarks'
import useTabs from '../../use-tabs'

const { bookmarks } = useBookmarks()
const { startCreateTab } = useTabs()
</script>

<template>
  <div class="bookmark-bar">
    <div class="bookmark" v-for="b in bookmarks" :key="b.url" @click="startCreateTab(b.url)">
      <img class="bookmark__favicon" :src="b.favicon" :alt="b.url" />
      <span class="bookmark__title">{{ b.title }}</span>
    </div>
  </div>
</template>

<style scoped>
.bookmark-bar {
  box-sizing: border-box;
  height: var(--bar-height);
  background: var(--bg-color-base);
  padding: var(--spacing-sm);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-xs);
}
.bookmark {
  border-radius: 12px;
  padding: var(--spacing-xs) var(--spacing-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
}
.bookmark:hover {
  background: var(--color-gray-3);
}
.bookmark__favicon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.bookmark__title {
  display: inline-block;
  max-width: 100px;
  font-size: var(--font-size-xs);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
